<!DOCTYPE html>
<html>
<head>
    <title>Resistor Network Diagram</title>
</head>
<body>
    <canvas id="myCanvas" width="400" height="350"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Define parameters
        const cx = 200; // Center x of the grid
        const cy = 150; // Center y of the grid
        const s = 80;   // Side length of one small square

        // Calculate main coordinates
        const left = cx - s;
        const right = cx + s;
        const top = cy - s;
        const bottom = cy + s;
        const fullSide = s * 2;

        // --- Draw the grid (resistor network) ---
        ctx.beginPath();
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'black';

        // Draw outer square
        ctx.strokeRect(left, top, fullSide, fullSide);

        // Draw inner horizontal line
        ctx.moveTo(left, cy);
        ctx.lineTo(right, cy);

        // Draw inner vertical line
        ctx.moveTo(cx, top);
        ctx.lineTo(cx, bottom);

        ctx.stroke();

        // --- Draw the labels ---
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Label O (italic)
        ctx.font = 'italic 24px "Times New Roman"';
        // Positioned in the bottom-left quadrant relative to the center point
        ctx.fillText('O', cx - 20, cy + 20);

        // Reset font to normal for other labels
        ctx.font = '24px "Times New Roman"';

        // Label A
        // Positioned to the left of the bottom-left corner
        ctx.fillText('A', left - 20, bottom);

        // Label B
        // Positioned to the right of the right-side midpoint
        ctx.fillText('B', right + 20, cy);

        // --- Draw the caption ---
        // Use KaiTi font for Chinese characters with a fallback
        ctx.font = '24px "KaiTi", "SimSun", "Times New Roman"';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('电图 4.17.1', cx, canvas.height - 30);

    </script>
</body>
</html>